<template>
  <div class="createoper-step">

    <div class="createoper-step-list">
      <dl class="createoper-step-card xh-card">
        <dt class="xh-card-dt">
          <div class="xh-card-dt-left">
            <img src="@/assets/icon-cesuan.png" style="margin-right:10px" alt="">
          <span class="title">模型设置1</span>
          <span class="info">选择 <strong>[经营营运资本]</strong>计算方式</span>
        </div>
        </dt>
        <dd>
          <stepSlect :options="operateOption" v-model="formData.operate" />
        </dd>
      </dl>
      <dl class="createoper-step-card xh-card">
        <dt class="xh-card-dt">
          <div class="xh-card-dt-left">
            <img src="@/assets/icon-cesuan.png" style="margin-right:10px" alt="">
          <span class="title">模型设置2</span>
          <span class="info">设置 <strong>[永续增长率]</strong></span>
          </div>
        </dt>
        <dd>
          <stepSlect :options="rateOption" v-model="formData.rate" />
        </dd>
      </dl>
    </div>
    <div class="createoper-step-footer">
      <el-button class="big-buttom" @click="handleNext()" type="primary"
        >开始系统填写</el-button
      >
      <el-button class="big-buttom upload-btn" @click="handleUpload"
        >上传EXCEL文件</el-button
      >
      <el-button type="text" size="small">EXCEL填写模板下载</el-button>
    </div>

  </div>
</template>
<script>
import stepSlect from "./stepSlect.vue";
import { downloadFile, createInput } from "@/utils/files";
export default {
  name: "Step1",
  components: {
    stepSlect,
  },
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      operateOption: [
        {
          name: "基础模式",
          value: 1,
          info:'填写每年增量，即：填写[经营营运资本增加占收入增加%]'
        },
        {
          name: "进阶模式",
          value: 2,
          info:'填写明细科目。即：填写[材料费占营业成本比]， [人工占营业成本比]、[期间费用率预估]、[人工占期间费用比]'
        },
      ],
      rateOption: [
        {
          name: "无",
          value: 1,
        },
        {
          name: "5%",
          value: 2,
        },
      ],
    };
  },
  watch: {},
  computed: {
    formData: {
      get() {
        console.log(this.data);
        return this.data || {};
      },
      set(val) {
        this.$emit("update:data", val);
      },
    },
  },
  mounted() {},
  methods: {
    // 下载blob
    handleDownloadFile() {
      downloadFile("", "模板文件.xlsx");
    },
    // 上传
    handleUpload() {
      // 限制excel文件
      createInput({
        accept:
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel",
      }).then((files) => {
        console.log(files[0]);
      });
    },
    handleNext() {
      this.$emit("next");
    },
  },
};
</script>
<style lang="scss" scoped>
.createoper-step {
  padding: 10px;
  &-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  &-card {
   
  }
  dt {
    padding: 15px 20px;
    .title {
      font-size: 16px;
      color: #333;
    }
    .info {
      font-size: 14px;
      color: #888;
      margin-left: 10px;
    }
    border-bottom: 1px solid #eee;
  }
  dd {
    padding: 15px;
  }
  &-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    .big-buttom {
      padding: 12px 24px;
      font-size: 14px;
      .el-button--primary{

      }
      +.big-buttom{
        margin-left: 40px;
      }
    }
    .upload-btn {
      border-color: var(--base-color);
      color: var(--base-color);
    }
  }
}
</style>
